<template>
  <div class="person-set">
    <div class="title">只查看以下角色</div>
    <div class="checkbox-list" v-loading="isLoading">
      <el-checkbox-group v-model="responsibleConfigData" v-if="roleList.length">
        <el-checkbox :value="item.roleId" v-for="item in roleList" :key="item.roleId">
          <span>{{ item.roleName }}</span>
        </el-checkbox>
      </el-checkbox-group>
      <el-empty v-else image-size="60" />
    </div>
    <div class="person-set__buttons">
      <el-button type="primary" class="buttons-cancel" link size="default" @click="handelReset">重置</el-button>
      <el-button type="primary" class="buttons-confirm" size="default" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from "vue";
import { responsibleConfigSet } from "@/apis/engineeringManage";
import { cloneDeep } from "lodash";
import { getRole } from "@/apis/system";

const { proxy } = getCurrentInstance();

const props = defineProps({
  configData: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["setPerson"]);

// 已选择
const responsibleConfigData = ref([]);
watch(
  () => props.configData,
  newVal => {
    responsibleConfigData.value = cloneDeep(newVal);
  },
  { immediate: true, deep: true }
);

/**
 * 角色列表
 */
const isLoading = ref(false);
const roleList = ref([]);
const getRoleList = async () => {
  try {
    isLoading.value = true;
    const { data } = await getRole();
    console.log(data, "<<<<<");
    roleList.value = data ?? [];
    isLoading.value = false;
  } catch (err) {
    isLoading.value = false;
    console.log(err);
  }
};

/**
 * 重置/确定
 */
const handelReset = async () => {
  await responsibleConfigSet([]);
  emit("setPerson", { data: [], isSet: false, isRefresh: true });
  proxy.$modal.msgSuccess("重置成功");
};
const handelConfirm = async () => {
  await responsibleConfigSet(responsibleConfigData.value);
  emit("setPerson", { data: responsibleConfigData.value, isSet: true, isRefresh: true });
  proxy.$modal.msgSuccess("设置成功");
};

getRoleList();
</script>

<style scoped lang="scss">
@import "roleList";
</style>
